<template>
  <view class="member-item bgf" @click.stop="toDetails">
    <!-- 头部 -->
    <view class="member-item__header">
      <view class="company-name value text-overflow-1">{{ item.memberName }}</view>
      <text v-if="showStatus" class="status-text" :style="{ color: statusColor }">
        {{ getStatusText }}
      </text>
    </view>
    <!-- 内容 -->
    <template v-for="(v, i) in contentTable" :key="v.id">
      <view class="content-item">
        <text class="label">{{ v.label }}</text>
        <text class="value text-overflow-1">{{ v.value }}</text>
        <!-- <img
          v-if="v.phoneNumber"
          class="phone-icon"
          src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/admin/icon-1.png"
          alt=""
          @click.stop="handleMakePhoneCall(v.phoneNumber as string)"
        /> -->
        <view v-if="v.isRightText" class="right-text">
          <span class="text">查看详情</span>
          <img class="right-icon" src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/admin/icon-2.png" alt="" />
        </view>
      </view>
    </template>
    <!-- 底部 -->
    <view v-if="showBtn" class="member-item__bottom">
      <view class="btn-group">
        <button class="bottom-btn" @click.stop="showContactWay">联系ta</button>
        <template
          v-if="item.isFinish === IsFinishEnum.DONE && item.auditStatus === AuditStatusEnum.AUDITED"
        >
          <button
            v-if="item.paymentStatus === PaymentStatusEnum.ALREADYPAYCOST"
            class="bottom-btn"
            @click.stop="
              navigateTo({
                name: 'memberDuesAudit',
                options: {
                  id: item.id,
                  isAudit: false,
                  refresh: () => emit('refresh'),
                },
              })
            "
          >
            缴费信息
          </button>

          <button v-if="item.memberId" class="bottom-btn" @click.stop="toMembershipCard">
            会员证
          </button>
          <button
            v-if="item.paymentStatus === PaymentStatusEnum.NOTPAYCOST"
            class="bottom-btn"
            type="primary"
            @click.stop="toDuesSet"
          >
            {{ item.isSetPaymenrecord ? '修改' : '会费设置' }}
          </button>

          <button
            v-if="item.paymentStatus === PaymentStatusEnum.DUE"
            class="bottom-btn bottom-btn-large"
            @click.stop="
              navigateTo({
                name: 'memberDuesAudit',
                options: {
                  id: item.id,
                  isAudit: true,
                  refresh: () => emit('refresh'),
                },
              })
            "
          >
            会费凭证审核
          </button>
        </template>
        <button
          v-else-if="item.auditStatus === AuditStatusEnum.CHECKPENDING"
          class="bottom-btn"
          type="primary"
          @click.stop="toDetails"
        >
          立即审核
        </button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import {
    ApplyTypeEnum,
    AuditStatusEnum,
    IsFinishEnum,
    PaymentStatusEnum,
  } from '@/enums/membershipEnum';
  import { navigateTo } from '@/router';
  import { Toast } from '@/utils';
  import { computed, type PropType, reactive, ref } from 'vue';

  interface ContentTable {
    label: string;
    value: string;
    phoneNumber?: string;
    isRightText?: boolean;
  }

  interface Item {
    id: number;
    applyType: ApplyTypeEnum;
    memberName: string;
    isFinish?: IsFinishEnum;
    auditStatus?: AuditStatusEnum;
    paymentStatus?: PaymentStatusEnum;
    createTime?: string;
    levelId?: number;
    levelName?: string;
    membershipFees?: number;
    memberId?: number;
    isSetPaymenrecord?: boolean;
  }

  const props = defineProps({
    item: {
      type: Object as PropType<Item>,
      required: true,
    },
    contentTable: {
      type: Array as PropType<ContentTable[]>,
      default: () =>
        [
          {
            label: '会员类型',
            value: '',
          },
          {
            label: '申请职务',
            value: '',
          },
          {
            label: '申请人',
            value: '',
          },
          {
            label: '申请时间',
            value: '',
            isRightText: true,
          },
        ] as ContentTable[],
    },
    detailsPath: String as PropType<
      'memberApplyFormAudit' | 'memberInfoApplyAudit' | 'memberRenewAudit'
    >,
    showBtn: Boolean,
    showStatus: Boolean,
  });

  const emit = defineEmits(['showContactWay', 'refresh']);

  const colors = reactive({
    success: '#DAA03E',
    await: '#2878FF',
    err: '#FF3F3F',
  });

  const statusColor = ref(colors.await);

  const getStatusText = computed(() => {
    let text = '';
    const v = props.item;
    switch (v.isFinish) {
      case IsFinishEnum.UNFINISHED:
      case undefined:
        /** 流程未完 */
        text = getAuditStatusText();
        break;
      case IsFinishEnum.DONE:
        if (v.paymentStatus === PaymentStatusEnum.ALREADYPAYCOST) {
          text = '已缴费';
          statusColor.value = colors.success;
        } else if (v.paymentStatus === PaymentStatusEnum.NOTPAYCOST) {
          text = v.isSetPaymenrecord ? '待缴费' : '待设置缴费';
          statusColor.value = colors.err;
        } else {
          text = '待缴费';
          statusColor.value = colors.err;
        }
        break;
      case IsFinishEnum.TERMINATION:
      case IsFinishEnum.DERECOGNITION:
        text = '终止审核';
        statusColor.value = colors.err;
        break;
    }
    return text;
  });

  function getAuditStatusText(): string {
    const v = props.item;
    let text = '';
    switch (v.auditStatus) {
      case AuditStatusEnum.AUDITED:
        text = '已通过';
        statusColor.value = colors.success;
        break;
      case AuditStatusEnum.CHECKPENDING:
        text = props.detailsPath === 'memberRenewAudit' ? '凭证待审核' : '资料待审核';
        // text = '';
        statusColor.value = colors.await;
        break;
      case AuditStatusEnum.REFUSAL:
        text = '已驳回';
        statusColor.value = colors.err;
        break;
    }
    return text;
  }

  function showContactWay() {
    emit('showContactWay');
  }

  function toDetails() {
    const { detailsPath, item } = props;
    detailsPath &&
      item &&
      navigateTo({
        name: detailsPath as any,
        options: {
          id: item.id,
          memberId: item.memberId,
          refresh: () => emit('refresh'),
        },
      });
  }

  function toDuesSet() {
    const { item } = props;
    navigateTo({
      name: 'duesSet',
      options: {
        id: item.id,
        memberName: item.memberName,
        levelName: item.levelName,
        levelId: item.levelId,
        applyType: item.applyType,
        refresh: () => {
          emit('refresh');
        },
      },
    });
  }

  function toMembershipCard() {
    if (props.item.memberId) {
      navigateTo({ name: 'membershipCard', options: { id: props.item.memberId } });
    } else {
      Toast('无memberId');
    }
  }

  function handleMakePhoneCall(phoneNumber: string) {
    uni.makePhoneCall({
      phoneNumber,
    });
  }
</script>

<style lang="scss" scoped>
  $backgroundColor: #fff;
  .member-item {
    // margin-top: 4rpx;
    font-size: $uni-font-size-base;
    margin: 0 32rpx;
    margin-top: 24rpx;
    border-radius: 24rpx;
    .label {
      color: #808080;
    }
    .value {
      color: #333;
    }
    &__header {
      padding: 0 20rpx;
      height: 88rpx;
      background-color: $backgroundColor;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 4rpx;
      border-radius: 20rpx;
      .company-name {
        font-size: $uni-font-size-lg;
        font-weight: bold;
      }
      .status-text {
        flex-shrink: 0;
      }
    }
    .content-item {
      flex: 1;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;
      padding: 0 20rpx;
      position: relative;
      .label {
        color: $uni-text-color-placeholder;
      }
      .value {
        color: $uni-text-color;
        margin-left: 10rpx;
      }
      .phone-icon {
        width: 40rpx;
        height: 40rpx;
        margin-left: 14rpx;
      }
      .right-text {
        position: absolute;
        right: 20rpx;
        display: flex;
        align-items: center;
        color: $uni-text-color-placeholder;
      }
      .right-icon {
        width: 24rpx;
        height: 24rpx;
        margin-left: 4rpx;
      }
    }
    .content-item:last-child {
      padding-bottom: 30rpx;
    }
    .content-mid {
      flex: 1;
      flex-shrink: 1;
      margin: 0 30rpx;
    }
    &__bottom {
      background-color: $backgroundColor;
      height: 88rpx;
      padding: 0 30rpx;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      border-radius: 20rpx;
      border-top: 1rpx #f5f5f5 solid;
      .btn-group {
        display: flex;
        .bottom-btn {
          padding: 0 20rpx;
          height: 60rpx;
          margin-left: 30rpx;
          line-height: 60rpx;
          font-size: $uni-font-size-base;
          border: none;
          .btn-text {
            flex: 1;
            text-align: center;
          }
        }
        .bottom-btn-large {
          padding: 0 20rpx;
          .ali-icon {
            margin-left: 0;
          }
        }
      }
    }
  }
</style>
